<template>
  <div>
    <!-- 头部导航 -->
    <div>
      <van-nav-bar title="v头条" fixed
        >\
        <template v-slot:left>
          <img src="../../assets/头条.png" class="logo" />
        </template>
        <template #right>
          <van-icon name="search" size="0.48rem" color="#fff" @click="toSearchPage" />
        </template>
      </van-nav-bar>
    </div>

    <!-- 标签页 -->
    <div class="main">
      <van-tabs v-model="channelId" sticky offset-top="46px" swipeable animated @change="channelChangeFn" >
        <van-tab
          v-for="item in userChannelList"
          :title="item.name"
          :key="item.id"
          :name="item.id"
        >
          <ArticleList :channelId="channelId"></ArticleList>
        </van-tab>
      </van-tabs>

      <!-- 编辑频道图标 -->
      <van-icon
        name="plus"
        size="14px"
        class="moreChannels"
        @click="showPopup"
      />
    </div>

    <!-- 频道管理的弹出层 -->
    <van-popup v-model="show" get-container="body" class="channel-popup">
      <ChannelEdit
        :userList="userChannelList"
        :unCheckList="unCheckChannelList"
        @addChannelEV="addChannelFn"
        @removeChannelEV="removeChannelFn"
        @closeEV="closeFn"
        ref="editRef"
        v-model="channelId"
      ></ChannelEdit>
    </van-popup>
  </div>
</template>

<script>
import { getUserChannelsAPI, getAllChannelsAPI, updateChannelsAPI, removeChannelApi } from '@/api'
import ArticleList from './components/ArticleList.vue'
import ChannelEdit from './ChannelEdit.vue'
export default {
  components: { ArticleList, ChannelEdit },
  data () {
    return {
      channelId: 0,
      userChannelList: [], // 用户选择频道列表
      allChannelList: [], // 所有频道列表
      show: false,
      channelScrollTObj: {}// 保存每个频道的滚动位置
    }
  },
  async created () {
    // 用户频道列表
    const res = await getUserChannelsAPI()
    this.userChannelList = res.data.data.channels

    // 所有频道列表
    const res2 = await getAllChannelsAPI()

    this.allChannelList = res2.data.data.channels
  },
  methods: {
    showPopup () {
      this.show = true
    },
    // tab切换事件
    channelChangeFn () {
      this.$nextTick(() => {
        document.documentElement.scrollTop = this.channelScrollTObj[this.channelId]
      })
    },
    // 添加频道
    async addChannelFn (channelObj) {
      this.userChannelList.push(channelObj)
      await updateChannelsAPI({
        channels: this.userChannelList
      })
    },
    // 删除频道
    async removeChannelFn (channelObj) {
      const index = this.userChannelList.findIndex(obj => obj.id === channelObj.id)
      this.userChannelList.splice(index, 1)
      await removeChannelApi({
        channelId: channelObj.id
      })
    },
    // 关闭弹出层
    closeFn () {
      this.show = false
      this.$refs.editRef.isEdit = false
    },
    // 跳转到搜索页面
    toSearchPage () {
      this.$router.push('/search')
    },
    scrollFn () {
      this.$route.meta.scrollT = document.documentElement.scrollTop
      this.channelScrollTObj[this.channelId] = document.documentElement.scrollTop
    }
  },
  computed: {
    unCheckChannelList () {
      return this.allChannelList.filter(
        (bigObj) =>
          !(
            this.userChannelList.findIndex(
              (smallObj) => smallObj.id === bigObj.id
            ) > -1
          )
      )
    }
  },
  activated () {
    console.log(this.$route)
    window.addEventListener('scroll', this.scrollFn)
    document.documentElement.scrollTop = this.$route.meta.scrollT
  },
  deactivated () {
    window.removeEventListener('scroll', this.scrollFn)
  }
}
</script>

<style lang="less" scoped>
/deep/ .van-nav-bar {
  background-color: orange;
}
/deep/ .van-tabs__line {
  background-color: orange;
}
.logo {
  width: 40px;
}
.main {
  padding-top: 46px;
  // 设置 tabs 容器的样式
  /deep/ .van-tabs__wrap {
    padding-right: 30px;
    background-color: #fff;
  }

  // 设置小图标的样式
  .moreChannels {
    position: fixed;
    top: 62px;
    right: 8px;
    z-index: 999;
  }
}
.channel-popup {
  width: 100vw;
  height: 100vh;
}
</style>
